import React, { Component } from 'react'
import { Row, Col, Input, Button, Checkbox } from 'antd'
import './AddMultipleChoice.less'

const { TextArea } = Input
class Index extends Component {

    constructor(props) {
        super(props)
        this.state = {
            id: '',
            questionContext: '',
            trueAnswer: [],
            options: []
        }
    }

    componentDidMount() {
        const { id, questionContext, trueAnswer, options } = this.props.question
        this.setState({
            id,
            questionContext,
            trueAnswer,
            options,
        })
    }

    render() {
        const { questionContext, trueAnswer, options } = this.state
        const { save } = this.props
        return <div className='add-multiple-choice'>
            <Row className='row'>
                <Col className='label'>
                    <span>题目：</span></Col>
                <Col span={20}>
                    <TextArea rows={3} placeholder="请填写题目" value={questionContext} onChange={(e) => {
                        this.setState({
                            questionContext: e.target.value
                        }, () => {
                            save(this.state)
                        })
                    }} />
                </Col>
            </Row>
            <Row className='row'>
                <Col className='label'>
                    <span>选项：</span></Col>
                <Col span={20}>
                    {options.map((option, index) => {
                        return <div className='text-area' key={index}>
                            <TextArea rows={1} value={option} onChange={(e) => {
                                let nextOptions = JSON.parse(JSON.stringify({ data: this.state.options })).data
                                nextOptions[index] = e.target.value
                                this.setState({
                                    options: nextOptions
                                }, () => {
                                    save(this.state)
                                })
                            }} />
                            <a onClick={() => {
                                let nextOptions = JSON.parse(JSON.stringify({ data: this.state.options })).data
                                nextOptions.splice(index, 1)
                                this.setState({
                                    options: nextOptions,
                                    trueAnswer: []
                                }, () => {
                                    save(this.state)
                                })
                            }}>删除</a>
                        </div>
                    })}
                    <div className='text-area'>
                        <Button className='add-btn' type='dashed' onClick={() => {
                            let nextOptions = JSON.parse(JSON.stringify({ data: this.state.options })).data
                            if (!nextOptions instanceof Array) {
                                nextOptions = []
                            }
                            nextOptions.push("")
                            this.setState({
                                options: nextOptions
                            }, () => {
                                save(this.state)
                            })
                        }}>增加选项</Button>
                    </div>
                </Col>
            </Row>
            <Row>
                <Col className='label'>
                    <span>正确答案：</span>
                </Col>
                <Col span={20}>
                    <Checkbox.Group value={trueAnswer} onChange={(values) => {
                        this.setState({
                            trueAnswer: values
                        }, () => {
                            save(this.state)
                        })
                    }}>
                        {options.map((_, index) => {
                            const value = String.fromCharCode(65 + index)
                            return <Checkbox key={value} value={value}>{value}</Checkbox>
                        })}
                    </Checkbox.Group>
                </Col>
            </Row>
        </div>
    }
}

export default Index